<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../css/normalize.css"/>
    <link rel="stylesheet" href="../../../css/fa.css"/>
    <link rel="stylesheet" href="../../../css/icon.css"/>
    <link rel="stylesheet" href="../../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../../css/app.min.css"/>
    <link rel="stylesheet" href="../../../css/iframe.css"/>
    <style>
        .layui-form-label {
            width: 130px;
        }

        .layui-input-block {
            margin-left: 130px;
        }
    </style>

</head>
<body>
<form class="ares-p layui-form" lay-filter="form">
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名称</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请输入套餐名称" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗单类别</label>
        <div class="layui-input-block">
            <select id="type-id" name="typeId" lay-verify="required" lay-filter="typeId">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗项目</label>
        <div id="sub-item-wrap" class="layui-input-block">

        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交表单</button>
        </div>
    </div>
</form>

</body>

<script type="text/javascript" src="../../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../../aresExtends/config/layuiConfig.js"></script>
<script>
    layui.use([ 'form', 'utils', 'comboServices', 'mandyServices', 'qs'], function (form, utils, comboServices, mandyServices, qs) {
        var queryParams = qs.parse(location.search.substr(1)),
            $type = $('input[name="type"]'),
            $typeId = $('#type-id');

        init();

        /**
         * @author: ares
         * @date: 2021/3/9 9:52
         * @description: 切换治疗单类别
         */
        form.on('select(typeId)', function (data) {
            getSubItem()
        });

        /**
         * @author: ares
         * @date: 2021/3/9 9:52
         * @description: 提交表单
         */
        form.on('submit(submit)', function (data) {
            var fields = data.field,
                submitData = getSubmitData(fields),
                service = getSubmitService(submitData),
                $this = $(data.elem);

            if (!submitData.subitemIds.length) {
                utils.msgError('请选择治疗项目');
                return false;
            }

            if (!service) return false;

            $this.prop('disabled', true).addClass('layui-btn-disabled')
            service(submitData).then(function (res) {
                utils.msgSuccess(res.message)
                $this.prop('disabled', false).removeClass('layui-btn-disabled')
                utils.ARES.event.emit('updateComboList');
                utils.layer.closeAll('iframe');
            }).catch(function (err) {
                $this.prop('disabled', false).removeClass('layui-btn-disabled')
            })
            return false;
        });

        /**
         * @author: ares
         * @date: 2021/3/8 16:24
         * @description: 获取治疗单数据
         */
        function getTypes() {
            return mandyServices.mandy_get_prescriptionType_syn().then(function (res) {
                var $fragment = $(document.createDocumentFragment()),
                    data = res.data;
                $.each(data.prcp_type_list, function (idx, val) {
                    $fragment.append('<option value="' + val.id + '">' + val.name + '</option>');
                })
                $typeId.empty().append($fragment);
                form.render('select');
            })
        }

        /**
         * @author: ares
         * @date: 2021/3/8 20:37
         * @description: 根据处方类别和治疗单类别查询治疗项目
         */
        function getSubItem() {
            var formFields = form.val('form');
            comboServices.getSubItemService(2, formFields.typeId).then(function (res) {
                renderSubItem(res.data);
            })
        }

        /**
         * @author: ares
         * @date: 2021/3/9 11:45
         * @description: 渲染治疗项目
         */
        function renderSubItem(items){
            var $subItemWrap = $('#sub-item-wrap'),
                $fragment = $(document.createDocumentFragment());
            $.each(items, function (index, item) {
                var $subItem = $('<input type="checkbox" value="' + item.id + '" name="item-' + item.id + '" title="' + item.itemName + '" lay-skin="primary" />');
                if(item.check) $subItem.prop('checked',true);
                $fragment.append($subItem);
            })
            $subItemWrap.empty().append($fragment);
            form.render('checkbox');
        }

        /**
         * @author: ares
         * @date: 2021/3/8 16:44
         * @description: 更新操作前渲染表单
         */
        function renderForm() {
            comboServices.getDetail(queryParams.id).then(function (res) {
                var data = res.data;
                $type.prop('disabled', true);
                $typeId.prop('disabled', true);
                form.val("form", {
                    name: data.name,
                    type: data.type,
                    typeId: data.typeId,
                });
                renderSubItem(data.prcpSubitemDtoList);
            })
        }

        /**
         * @author: ares
         * @date: 2021/3/9 9:06
         * @description: 获取提交表单时的数据
         * @param {object}formFields 表单数据
         * @returns {{name, type, typeId, subitemIds: Array}}
         */
        function getSubmitData(formFields) {
            var data = {
                name: formFields.name,
                type: 2,
                typeId: formFields.typeId,
                subitemIds: [],
            };
            for (field in formFields) {
                if (field.indexOf('item-') == 0) data.subitemIds.push(formFields[field])
            }
            return data;
        }

        /**
         * @author: ares
         * @date: 2021/3/9 9:08
         * @description: 获取提交表单时用到的服务  新增|更新
         * @param{object}  submitData  提交表单时的数据,更新操作时追加id值
         * @returns {*}
         */
        function getSubmitService(submitData) {
            var service = null;
            if (queryParams.id) {
                service = comboServices.update
                submitData.id = queryParams.id;
            } else {
                service = comboServices.create
            }
            return service;
        }

        /**
         * @author: ares
         * @date: 2021/3/9 9:46
         * @description: 初始化
         */
        function init() {
            if (queryParams.id) {
                getTypes().then(function () {
                    renderForm()
                })
            } else {
                getTypes().then(function () {
                    getSubItem()
                });
            }
            form.render();
        }

    })
</script>


</html>